<!DOCTYPE html>
<html>
<head>
  <title>test</title>
<meta charset="utf-8">
<style type="text/css">
input{width: 20px;text-align: center;}
.click1{background: #f00}
#box div{border: 1px solid;width: 200px;height: 200px;display: none;} 
</style>
<script type="text/javascript">
window.onload=function(){
	var obj1 = new Obj('box');
	obj1.init();
}
function Obj(id){
	this.box = document.getElementById(id);
	this.oDiv = this.box.getElementsByTagName('div');
	this.oBtn = this.box.getElementsByTagName('input');
}
Obj.prototype.init = function(){
	var This = this;
	for (var i = 0; i < this.oBtn.length; i++) {
		this.oBtn[i].index = i;
		this.oBtn[i].onclick = function(){
			This.click(this);
		}
	};
}
Obj.prototype.click = function(obj){
	for (var i = 0; i < this.oBtn.length; i++) {
		this.oBtn[i].className = '';
		this.oDiv[i].style.display = 'none';
	};
	obj.className = 'click1';
	this.oDiv[obj.index].style.display = 'block';
}
</script>
</head>
<body>
	<div id="box">
		<input class='click1' type="button" value="1">
		<input type="button" value="2">
		<input type="button" value="3">
		<div style="display:block">111</div>
		<div>222</div>
		<div>333</div>
	</div>
</body>
</html>